<template>
    <div>
        <header class="header-navigation" id="header">
            <nav>
                <div class="logo"><a href="/">个人博客</a></div>
                <h2 id="mnavh"><span class="navicon"></span></h2>
                <ul id="starlist" style="position: relative">
                    <li><a href="javascript:" @click="goTo('index')" name="index">网站首页</a></li>
                    <li><a href="javascript:" @click="goTo('Classify')" name="Classify">分类</a></li>
                    <li><a href="javascript:" @click="goTo('Label')" name="Label">标签</a></li>
                    <li><a href="javascript:" @click="goTo('MessageBoard')" name="MessageBoard">留言板</a></li>
                    <li><a href="javascript:" @click="goTo('AboutMe')" name="AboutMe">关于我</a></li>
                    <li>
                        <el-input style="width: 200px;" placeholder="输入关键字" v-model="query"></el-input>
                        <el-button type="info" icon="el-icon-search" style="height: 35px">搜索</el-button>
                    </li>
                    <li style="position: absolute; right: -150px">
                        <el-dropdown trigger="hover">
                            <el-button type="danger" icon="el-icon-edit-outline">创作中心</el-button>
                            <el-dropdown-menu style="margin-top: 0">
                                <div @click="goTo('EditorBlog')">
                                    <el-dropdown-item>
                                        写博客
                                    </el-dropdown-item>
                                </div>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </li>
                    <li style="position: absolute; right: -240px">
                        <div v-if="!isLogin">
                            <a href="javascript:void 0;" @click="changeDialogState(true)">
                                登录/注册</a>
                        </div>

                        <div v-else class="headerimg">
                            <el-dropdown trigger="hover">
                                <el-avatar :src="this.$store.getters['user/getUserHeader']"></el-avatar>
                                <el-dropdown-menu style="margin-top: 0">
                                    <div @click="myData()">
                                        <el-dropdown-item>
                                            个人中心
                                        </el-dropdown-item>
                                    </div>
                                    <div @click="exitLogin()">
                                        <el-dropdown-item>
                                            退出登录
                                        </el-dropdown-item>
                                    </div>

                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </li>
                </ul>
            </nav>

        </header>


        <el-dialog
                :title="loginTitle"
                :visible.sync="dialogVisible"
                :close-on-click-modal="false"

                top="30vh"
                center
                @close="closeDialog"
                width="30%">


            <!--        这里是登录的form表单-->
            <div v-if="showForm === '1'">

                <div v-if="loginConfig.register">
                    <span class="register">没有账号？ <a href="javascript:void (0);" @click="register('2')">点此注册</a></span>

                </div>


                <!--          账号密码登录的表单-->

                <div :class="{'display': smsLogin}">


                    <el-form class="form" :model="loginForm" ref="loginFormName" label-width="30%" status-icon
                             :rules="loginRules">


                        <el-form-item class="login-input" label="用户名: " prop="account">
                            <el-input v-model="loginForm.account" placeholder="手机号/用户名"></el-input>
                        </el-form-item>

                        <el-form-item class="login-input " label="密码: " prop="password">
                            <el-input v-model="loginForm.password" show-password placeholder="请输入密码"></el-input>

                        </el-form-item>


                        <el-form-item>
                            <el-row :span="24">
                                <div v-if="loginConfig.forgetPass">
                                    <el-col :span="12" class="content" style="margin-left: -30px"><span
                                            @click="register('3')">忘记密码?</span></el-col>

                                </div>

                                <div v-if="loginConfig.smsLogin">
                                    <el-col :span="12" class="content" style="margin-left: 30px"><span
                                            @click="sms('loginFormName')">{{ smsTitle }}</span>
                                    </el-col>
                                </div>


                            </el-row>
                        </el-form-item>
                        <el-button type="primary" class="login-btn" @click="loginUser('loginFormName')">登录</el-button>
                    </el-form>


                </div>

                <!--          短信验证登录的表单-->
                <div :class="{'display': !smsLogin}">


                    <el-form class="form" :model="loginSmsForm" ref="loginSmsFormName" label-width="30%" status-icon
                             :rules="loginSmsRules">
                        <el-form-item class="login-input" label="手机号: " prop="phone">
                            <el-input v-model="loginSmsForm.phone" placeholder="手机号码"></el-input>
                        </el-form-item>

                        <el-form-item class="login-input " label="验证码" prop="smsNum">
                            <el-row :span="24">
                                <el-col :span="16">
                                    <el-input v-model="loginSmsForm.smsNum"
                                              :disabled="sendSmsBtn.loginsendSmsTitle.NoSendSms"
                                              placeholder="手机验证码"></el-input>
                                </el-col>
                                <el-col :span="8">
                                    <el-button :disabled="sendSmsBtn.loginsendSmsTitle.isDisabled"
                                               @click="sendSms('loginSmsFormName',1)">
                                        {{ sendSmsBtn.loginsendSmsTitle.content }}
                                    </el-button>
                                </el-col>
                            </el-row>

                        </el-form-item>

                        <el-form-item>
                            <el-row :span="24">
                                <el-col :span="12" class="content" style="margin-left: -30px"><span
                                        @click="register('3')">忘记密码?</span>
                                </el-col>
                                <el-col :span="12" class="content" style="margin-left: 30px"><span
                                        @click="sms('loginSmsFormName')">{{ smsTitle }}</span>
                                </el-col>
                            </el-row>

                        </el-form-item>

                        <el-button type="primary" class="login-btn" @click="loginUser('loginSmsFormName')">登录
                        </el-button>

                    </el-form>


                </div>

            </div>


            <!--      这里是注册的表单-->

            <div v-else-if="showForm === '2' ">
                <span class="register">已有账号？ <a href="javascript:void (0);" @click="register('1')">点此登录</a></span>
                <el-form class="form" :model="registerForm" ref="registerFormName" label-width="30%" status-icon
                         :rules="registerRules">

                    <el-form-item class="login-input" label="用户名: " prop="registerAccount">
                        <el-input v-model="registerForm.registerAccount" placeholder="输入注册账号" ></el-input>
                    </el-form-item>


                    <el-form-item class="login-input " label="密码: " prop="registerpassword">
                        <el-input v-model="registerForm.registerpassword" show-password placeholder="请输入密码"></el-input>

                    </el-form-item>
                    <el-form-item class="login-input " label="确认密码: " prop="repasswrod">
                        <el-input v-model="registerForm.repasswrod" show-password placeholder="请再次输入密码"></el-input>

                    </el-form-item>
                    <el-form-item class="login-input" label="手机号: " prop="phone">
                        <el-input v-model="registerForm.phone" placeholder="请输入手机号码"></el-input>
                    </el-form-item>
                    <el-form-item class="login-input" label="验证码" prop="smsnum">
                        <el-row :span="24">
                            <el-col :span="16">
                                <el-input v-model="registerForm.smsnum"
                                          :disabled="sendSmsBtn.registersendSmsTitle.NoSendSms"
                                          placeholder="手机验证码"></el-input>
                            </el-col>
                            <el-col :span="8">
                                <el-button :disabled="sendSmsBtn.registersendSmsTitle.isDisabled"
                                           @click="sendSms('registerFormName',2)">{{
                                    sendSmsBtn.registersendSmsTitle.content }}
                                </el-button>
                            </el-col>
                        </el-row>


                    </el-form-item>


                    <el-button type="primary" class="login-btn" @click="registerUser()">注册</el-button>

                </el-form>
            </div>


            <!--        这里是忘记密码的表单-->
            <div v-else-if="showForm === '3'">
        <span class="register" style="margin-left:65%"><a href="javascript:void (0);"
                                                          @click="register('1')">返回登录</a></span>
                <el-form class="form" :model="forgetPassForm" ref="forgetPassForm" label-width="30%" status-icon
                         :rules="forgetPassFormRules">


                    <el-form-item class="login-input" label="手机号: " prop="phone">
                        <el-input v-model="forgetPassForm.phone" placeholder="手机号码"></el-input>
                    </el-form-item>

                    <el-form-item class="login-input " label="验证码" prop="smsNum">
                        <el-row :span="24">
                            <el-col :span="16">
                                <el-input v-model="forgetPassForm.smsNum"
                                          :disabled="sendSmsBtn.forgetsendSmsTitle.NoSendSms"
                                          placeholder="手机验证码"></el-input>
                            </el-col>
                            <el-col :span="8">
                                <el-button @click="sendSms('forgetPassForm',3)"
                                           :disabled="sendSmsBtn.forgetsendSmsTitle.isDisabled">
                                    {{ sendSmsBtn.forgetsendSmsTitle.content }}
                                </el-button>
                            </el-col>
                        </el-row>

                    </el-form-item>
                    <el-form-item class="login-input" label="新密码: " prop="forgetPassword">
                        <el-input v-model="forgetPassForm.forgetPassword" placeholder="请输入新密码"></el-input>
                    </el-form-item>
                    <el-form-item class="login-input" label="确认密码: " prop="forgetRepassword">
                        <el-input v-model="forgetPassForm.forgetRepassword" placeholder="请再次输入密码"></el-input>
                    </el-form-item>
                    <el-button type="primary" class="login-btn">确认修改</el-button>
                </el-form>


            </div>


            <div v-if="loginConfig.thirdLogin" style="text-align: center">
                <el-divider content-position="center" class="third-position">其他方式登录</el-divider>
                <!--        其他方式登录图标   -->
                <el-button type="primary" icon="fa fa-qq" circle></el-button>
            </div>


        </el-dialog>

    </div>
</template>


<script>
    import {$routes} from "../router";

    export default {
        name: "Header",
        mounted() {
            if (localStorage.getItem("token") !== null) {
                this.$axios.post("/api/loginuser").then(res => {
                    if (res.status === 200) {
                        this.isLogin = true;
                        this.$method.saveData(res,this.$store);
                    }
                }).catch(res => {
                });
            }
            let title = window.location.pathname.substring(1);
            if ( title === ""){
                title = "index";
            }
            this.changeClick(title);
            //加载登录配置
            this.$axios.post("/api/getConfig").then(res=>{
                if (res.status === 200){
                    this.loginConfig = res.data;
                    for (let key in this.loginConfig) {
                        this.loginConfig[key] = this.loginConfig[key] === 1 ? true : false;

                    }
                }
            }).catch(reason => {});

        },
        data() {
            //注册确认密码的验证
            let confirmPassword = (rule, value, callback) => {

                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.registerForm.registerpassword) {

                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();

                }
            };
            //忘记密码表单确认密码验证
            let forgetConfirmPassword = (rule, value, callback) => {

                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.forgetPassForm.forgetPassword) {

                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();

                }
            };
            //手机号码验证
            let checkPhone = (rule, value, callback) => {
                if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(value))) {
                    callback(new Error('手机号格式不正确'));
                } else {
                    callback();
                }
            };
            //账号是否已注册验证
            let checkAccount = (rule,value,callback)=>{
                this.$axios.post("/api/checkAcc",value).then(res=>{
                    if (res.status === 201) {
                        callback(new Error("该账号已注册!"));
                    }else {
                        callback();
                    }
                }).catch(res=>{});
            }

            return {
                loginConfig: {
                    register: false,
                    smsLogin: false,
                    forgetPass: false,
                    thirdLogin: false
                },
                query: undefined,
                dialogVisible:false,
                //登录的表单绑定数据
                loginForm: {
                    account: undefined,
                    password: undefined
                },
                //短信登录的表单绑定数据
                loginSmsForm: {
                    phone: undefined,
                    smsNum: undefined
                },
                //注册的表单绑定数据
                registerForm: {
                    registerAccount: undefined,
                    registerpassword: undefined,
                    repasswrod: undefined,
                    phone: undefined,
                    smsnum: undefined
                },
                //忘记密码表单绑定数据
                forgetPassForm: {
                    phone: undefined,
                    smsNum: undefined,
                    forgetPassword: undefined,
                    forgetRepassword: undefined
                },
                //是否已经登录
                isLogin: false,

                //当前显示哪个表单
                showForm: '1',
                //是否是短信验证登录
                smsLogin: false,
                //模态框标题
                loginTitle: "登录",
                smsTitle: "验证码登录",
                //发送验证码按钮控制
                sendSmsBtn: {
                    loginsendSmsTitle: {
                        //按钮内容
                        content: "获取验证码",
                        //是否禁用
                        isDisabled: false,
                        //是否已经发送短信
                        NoSendSms: true
                    },
                    registersendSmsTitle: {
                        content: "获取验证码",
                        isDisabled: false,
                        NoSendSms: true
                    },
                    forgetsendSmsTitle: {
                        content: "获取验证码",
                        isDisabled: false,
                        NoSendSms: true
                    },
                },

                //登录验证规则
                loginRules: {
                    account: [
                        {required: true, message: "账号不能为空", trigger: "blur"},
                        {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: "密码不能为空", trigger: "blur"}
                    ]
                },
                //短信登录验证规则
                loginSmsRules: {
                    phone: [
                        {required: true, message: "手机号不能为空", trigger: "blur"},
                        {validator: checkPhone, trigger: "blur"}

                    ],
                    smsNum: [
                        {required: true, message: "验证码不能为空", trigger: "blur"}
                    ]
                },
                //注册验证规则
                registerRules: {
                    registerAccount: [
                        {required: true, message: "账号不能为空", trigger: "blur"},
                        {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'},
                        {validator:checkAccount,trigger: "blur"}
                    ],
                    registerpassword: [
                        {required: true, message: "密码不能为空", trigger: "blur"},
                        {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'},

                    ],
                    repasswrod: [
                        {required: true, message: "密码不能为空", trigger: "blur"},
                        {validator: confirmPassword, trigger: "blur"}
                    ],
                    phone: [
                        {required: true, message: "手机号不能为空", trigger: "blur"},
                        {validator: checkPhone, trigger: "blur"}
                    ],
                    smsnum: [
                        {required: true, message: "验证码不能为空", trigger: "blur"}
                    ]
                },
                //忘记密码验证规则
                forgetPassFormRules: {
                    phone: [
                        {required: true, message: "手机号不能为空", trigger: "blur"},
                        {validator: checkPhone, trigger: "blur"}
                    ],
                    smsNum: [
                        {required: true, message: "验证码不能为空", trigger: "blur"}
                    ],
                    forgetPassword: [
                        {required: true, message: "密码不能为空", trigger: "blur"},
                        {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'},

                    ],
                    forgetRepassword: [
                        {required: true, message: "密码不能为空", trigger: "blur"},
                        {validator: forgetConfirmPassword, trigger: "blur"}
                    ]
                }


            }
        },
        computed:{
            dialogData(){
                return this.$store.getters["user/getDialogVisible"];
            }

        },
        watch:{
            dialogData:function(newData,oldData){
                this.dialogVisible = newData;
            }
        },
        methods: {
            //临时方法，我这里主要用的是关闭模态框执行一些方法
            tempFun(){
            },
            //点击登录、注册、忘记密码时切换表单的方法
            register(num) {

                switch (num) {

                    case '1':
                        this.showForm = '1';
                        this.loginTitle = '登录';
                        break;
                    case '2':
                        this.showForm = '2';
                        this.loginTitle = '注册';

                        break;
                    case '3':
                        this.showForm = '3';
                        this.loginTitle = '忘记密码';
                        break;
                }

                //这里是处理返回后表单数据依然存在的问题
                for (let i in this.$refs) {

                    let obj = this.$refs[i];
                    if (obj === undefined) {
                        continue;
                    }

                    obj.resetFields();

                }
            },
            //点击短信验证登录的方法
            sms(formName) {

                this.smsLogin = !this.smsLogin;
                this.smsTitle = ! this.smsLogin ? "短信验证登录" : "账号密码登录";
                //将传入进来的表单重置
                this.$refs[formName].resetFields();


            },
            //重置验证码按钮内容
            resetSmsContent() {
                this.sendSmsBtn = {
                    loginsendSmsTitle: {
                        //按钮内容
                        content: "获取验证码",
                        //是否禁用
                        isDisabled: false,
                        //是否已经发送短信
                        NoSendSms: true
                    },
                    registersendSmsTitle: {
                        content: "获取验证码",
                        isDisabled: false,
                        NoSendSms: true
                    },
                    forgetsendSmsTitle: {
                        content: "获取验证码",
                        isDisabled: false,
                        NoSendSms: true
                    },
                }
            },
            //点击登录的方法
            loginUser(loginForm) {
                if (this.smsLogin){
                  this.$refs["loginSmsFormName"].validate((valid)=>{
                    if (valid){
                      this.$axios.post(`/api/loginPhone?phone=${this.loginSmsForm.phone}&num=${this.loginSmsForm.smsNum}`)
                      .then(response=>{
                        if (response.status === 201){
                          this.loginSmsForm.smsNum = "";
                          this.$myMessage.error("验证码不正确");
                        }else if (response.status === 200){
                          this.$myMessage.success("登录成功");
                          this.isLogin = true;
                          this.$store.state.user.dialogVisible = false;
                          this.$method.saveData(response,this.$store);
                          window.localStorage.setItem("token",response.token);
                        }
                      }).catch(reason => {});
                    }
                  });
                }else {
                  this.$refs[loginForm].validate((valid) => {
                    if (valid) {
                      //发送请求
                      this.$axios.post("/api/login", this.loginForm).then(
                          response => {
                            if (response.data != null) {
                              this.$myMessage.success("登录成功")
                              this.isLogin = true;
                              this.$store.state.user.dialogVisible = false;
                              this.$method.saveData(response,this.$store);
                              window.localStorage.setItem("token",response.token);
                            } else {
                              this.$myMessage.error("账号或密码错误");
                              this.loginForm.password = "";
                            }
                          }
                      );
                    }
                  });
                }
            },
            //发送验证码方法
            sendSms(verify, showForm) {
                let success = false;
                //验证手机号格式是否正确
                this.$refs[verify].validateField('phone', succ => {
                    //这里的succ是错误信息 如果是""则为验证通过，（表示无语）
                    if ("" === succ) {
                        success = true;
                    }
                });
                if (!success) {
                    return;
                }
                //改变按钮内容

                switch (showForm) {
                    case 1:
                      //验证账号是否已经被注册
                      this.$axios.post("/api/validPhone", {phone: this.loginSmsForm.phone}).then(res => {
                        if (res.status === 201) {
                          this.sendSmsBtn.loginsendSmsTitle.NoSendSms = false;
                          this.sendSmsBtn.loginsendSmsTitle.isDisabled = true;
                          let i = 60;

                          this.sendSmsBtn.loginsendSmsTitle.content = i + "秒后重新获取";
                          let timer = setInterval(() => {
                            i--;
                            this.sendSmsBtn.loginsendSmsTitle.content = i + "秒后重新获取";
                            if (i == 0) {
                              clearInterval(timer);
                              this.sendSmsBtn.loginsendSmsTitle.content = "重新获取";
                              this.sendSmsBtn.loginsendSmsTitle.isDisabled = false;

                            }
                          }, 1000);
                          //这里就是使用axios向后端发送请求，发送短信
                          this.$axios.post("/api/sendSms",this.loginSmsForm.phone).then(res=>{
                            if (res.status === 200){
                              this.$myMessage.success("短信发送成功，请注意查收!");
                            }
                          }).catch(resp=>{});
                        } else {
                          this.$myMessage.error("该手机号未注册，请先注册!");
                          this.registerForm.phone = null;
                        }
                      }).catch(reason => {
                      });

                        break;
                    case 2:
                        //验证账号是否已经被注册
                        this.$axios.post("/api/validPhone", {phone: this.registerForm.phone}).then(res => {
                            console.log(res)
                            if (res.status === 200) {
                                this.sendSmsBtn.registersendSmsTitle.NoSendSms = false;
                                this.sendSmsBtn.registersendSmsTitle.isDisabled = true;
                                let i = 60;
                                let timer1 = setInterval(() => {
                                    i--;
                                    this.sendSmsBtn.registersendSmsTitle.content = i + "秒后重新获取";
                                    if (i === 0) {
                                        clearInterval(timer1)
                                        this.sendSmsBtn.registersendSmsTitle.content = "重新获取";
                                        this.sendSmsBtn.registersendSmsTitle.isDisabled = false;
                                    }
                                }, 1000);
                              //这里就是使用axios向后端发送请求，发送短信
                              this.$axios.post("/api/sendSms",this.registerForm.phone).then(res=>{
                                if (res.status === 200){
                                  this.$myMessage.success("短信发送成功，请注意查收!");
                                }
                              }).catch(resp=>{});
                            } else {
                                this.$myMessage.error(res.message);
                                this.registerForm.phone = null;
                            }
                        }).catch(reason => {
                        });
                        break;
                    case  3:
                        this.sendSmsBtn.forgetsendSmsTitle.NoSendSms = false;
                        this.sendSmsBtn.forgetsendSmsTitle.isDisabled = true;
                        let  i = 60;
                        let timer2 = setInterval(() => {
                            i--;
                            this.sendSmsBtn.forgetsendSmsTitle.content = i + "秒后重新获取";
                            if (i === 0) {
                                clearInterval(timer2)
                                this.sendSmsBtn.forgetsendSmsTitle.content = "重新获取";
                                this.sendSmsBtn.forgetsendSmsTitle.isDisabled = false;
                            }
                        }, 1000);
                      //这里就是使用axios向后端发送请求，发送短信
                      this.$axios.post("/api/sendSms",this.forgetPassForm.phone).then(res=>{
                        if (res.status === 200){
                          this.$myMessage.success("短信发送成功，请注意查收!");
                        }
                      }).catch(resp=>{});
                        break;
                }


            },
            //关闭模态框的回调，清空所以表单内容，解决再次打开上次值还在的问题
            closeDialog() {
                for (let name in this.$refs) {
                    let obj = this.$refs[name];
                    if (obj === undefined) {
                        continue;
                    }
                    obj.resetFields();
                }
                this.resetSmsContent();
                this.showForm = '1';
                this.loginTitle = "登录";
                this.tempFun();
                this.tempFun = ()=>{};
                this.$store.state.user.dialogVisible = false;
            },
            //点击个人中心执行的方法
            myData() {
                //判断登录是否已过期
                this.$axios.post("./api/loginuser").then(res=>{
                    if (res.status === 200){
                        this.$method.saveData(res,this.$store);
                        //跳转个人中心页面
                        this.goTo("PersonalCenter");
                    }
                }).catch(reason => {});
            },
            exitLogin() {
                this.$store.commit('user/setIsLogin',false);
                this.$store.commit('user/setUserHeader',"");
                this.$store.commit('user/setUsers',{});
                this.isLogin = false;
                this.$axios.post("/api/logout").then(res=>{
                  localStorage.removeItem("token");
                }).catch(reason => {});
                this.goTo("index");
            },
            //点击注册执行的方法
            registerUser() {
                this.$refs["registerFormName"].validate((valid) => {
                    if (valid) {
                        let registerUser = {
                            account: this.registerForm.registerAccount,
                            password: this.registerForm.registerpassword,
                            phone: this.registerForm.phone,
                            valid:this.registerForm.smsnum
                        }
                        this.$axios.post('/api/register', registerUser).then(res => {
                            if (res.status === 200){
                                this.$myMessage.success("注册成功！");
                                this.showForm = "1";
                                this.smsLogin = false;
                            }else {
                              this.$myMessage.error(res.message);
                            }
                        }).catch(reason => {});
                    }
                })
            },

            goTo(name) {
                if (name === "EditorBlog") {
                    //判断是否登录
                    if (window.localStorage.getItem("token") == null) {
                        this.$myMessage.error("请先登录！");
                        //延迟一秒执行
                        setTimeout(() => {
                            this.$store.state.user.dialogVisible = true;
                        }, 1000);
                        this.tempFun =  () =>{
                            if (this.isLogin){
                                this.goTo(name);
                            }
                        };
                        return;
                    }
                        this.$axios.post("./api/loginuser").then(res=>{
                            this.$store.commit('user/setShowFooter',false);
                        });

                }else {
                    window.onbeforeunload=undefined;
                }
                this.$router.push({name:name});
                this.changeClick(name);

            },
            changeClick(name){
                let obj = null;
                let As = document.getElementById('starlist').getElementsByTagName('a');
                obj = As[0];
                for (let i = 0; i < As.length; i++) {
                    if (name === As[i].getAttribute('name')){
                        As[i].id = 'selected';
                    }else {
                        As[i].id = '';
                    }

                }

            },
            changeDialogState(param){
                this.$store.state.user.dialogVisible = param;
            }
        }
    }

</script>

<style scoped>


    .login-input {
        width: 80%;
    }

    .login-btn {
        width: 57%;
        margin-left: 23%;
    }

    .register {
        margin-left: 55%;
    }

    .register > a {
        color: #005980;

    }

    .register > a:hover {
        text-decoration: underline;
        color: #1989fa;
    }

    .form {
        margin-top: 10px;
    }

    .content {

        color: #005980;
    }

    .display {
        display: none;
    }

    .content:hover {
        text-decoration: underline;
        color: #1989fa;
        cursor: pointer;
    }

    .third-position {
        margin-top: 50px;
        margin-bottom: 30px;
    }

    .headerimg {
        margin-top: 10px;
        cursor: pointer;
    }
</style>

